<template>
	<el-container id="containers">
		<!-- 页头显示 -->
		<el-header>
			<span style="font-size: 25px; color: #000000;float:left;">众筹平台</span>
			<el-dropdown style="float:right">
				<el-avatar style="background-color: #5DAF34;" icon="el-icon-user-solid"></el-avatar>
				<el-dropdown-menu style="width: 120px; text-align: center;">
					<el-link @click="toIndex" target="_blank">首页</el-link> <br>
					<el-link @click="toMember" target="_blank">个人中心</el-link> <br>
					<el-link @click="UserDetaties=true" target="_blank">个人信息</el-link> <br>
					<el-link @click="toupdatepwd(users.userid)" target="_blank">密码修改</el-link> <br>
					<el-link @click="toHome(users.userid)" target="_blank">管理员入口</el-link> <br>
					<el-link @click="loginout" target="_blank">退出系统</el-link>

					<!-- <el-button style="border-bottom: solid;" @click="toIndex">众筹网首页</el-button>
					<br>
					<el-button style="border-bottom: solid;" @click="loginout">退出系统</el-button> -->
				</el-dropdown-menu>
			</el-dropdown>
		</el-header>
		<!-- 主体显示 -->
		<el-main id="member_id">
			<router-view></router-view>
		</el-main>

		<!-- 个人信息展示 -->
		<el-dialog title="提示" :visible.sync="UserDetaties" width="30%" :before-close="shutUser">
			<el-descriptions class="margin-top" title="个人信息" :column="1" border>
				<template slot="extra">
					<el-button type="primary" @click="toUpdateUser(users.userid)">修改信息</el-button>
				</template>
				<el-descriptions-item>
					<template slot="label">
						用户名
					</template>
					{{users.username}}
				</el-descriptions-item>

				<el-descriptions-item>
					<template slot="label">
						性别
					</template>
					{{users.sex}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						年龄
					</template>
					{{users.age}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						邮箱
					</template>
					{{users.email}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						头像
					</template>
					<el-image :src="imgurl+users.tx" :fit="fit"></el-image>
				</el-descriptions-item>
			</el-descriptions>
			<span slot="footer" class="dialog-footer">
				<el-button type="info" @click="shutUser">关闭</el-button>

			</span>
		</el-dialog>

		<!-- 修改用户信息 -->
		<el-dialog title="修改用户信息" :visible.sync="updateDialogVisible" width="30%" :before-close="updatereset">
			<!--修改用户信息的表单 -->
			<el-form ref="updateref" :rules="updateUsers" :model="updUser" label-width="100px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="updUser.username"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-input v-model="updUser.sex"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model="updUser.age"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="updUser.email"></el-input>
				</el-form-item>
				<el-form-item label="头像">
					<el-image :src="imgurl+updUser.tx" :fit="fit"></el-image>
					<!-- 图片上传 -->
					<!-- action:默认上传的路径 
								list-type：上传组件的样式
								on-preview：图片放大函数
								on-remove：图片移除的函数
								on-success：上传成功后的函数-->
					<el-upload action="http://localhost:8888/crowdfunding_system_war_exploded/upload"
						list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
						:on-success="addSuccess">
						<i class="el-icon-plus"></i>
					</el-upload>
					<!-- 图片放大后的对话框 -->
					<el-dialog :visible.sync="imgDialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>
			</el-form>
			<!-- 取消和确定按钮 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="updatereset">取 消</el-button>
				<el-button type="primary" @click="upUser">修 改</el-button>
			</span>
		</el-dialog>

		<!-- 修改密码 -->
		<el-dialog title="修改密码" :visible.sync="passwordDialog" width="30%" :before-close="passreset">
			<span>
				忘记密码？请
				<el-button type="text" @click="returnPassword">找回密码</el-button>
			</span>

			<!--修改密码的表单 -->
			<el-form ref="passwordRef" :rules="passwordRules" :model="uppwd" label-width="100px">
				<el-form-item label="原密码" prop="oldpassword">
					<el-input type="password" v-model="uppwd.oldpassword" @blur="pwd"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="newPassword">
					<el-input type="password" v-model="uppwd.newPassword"></el-input>
				</el-form-item>
				<el-form-item label="确认新密码" prop="checkPass">
					<el-input type="password" v-model="uppwd.checkPass"></el-input>
				</el-form-item>

			</el-form>
			<!-- 取消和确定按钮 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="shutpwd" type="info">取 消</el-button>
				<el-button type="primary" @click="updatepwd">确定</el-button>

			</span>
		</el-dialog>
	</el-container>
</template>

<script>
	// 引入qs依赖
	import qs from "qs";
	export default {
		data() {
			// 自定义邮箱验证的规则
			var checkEmail = ((rule, value, callback) => {
				if (!value) { //value为空
					return callback(new Error('邮箱不能为空'))
				}
				//判断是否符合邮箱的正则表达式
				var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
				if (!reg.test(value)) {
					return callback(new Error('邮箱格式不合法'))
				}
				return callback();
			});
			var checkMobile = ((rule, value, callback) => {
				if (!value) { //value为空
					return callback(new Error('手机号不能为空'))
				}
				//判断是否符合手机号的正则表达式
				var reg = /^[1][0-9]{10}$/
				if (!reg.test(value)) {
					return callback(new Error('手机号格式不合法'))
				}
				return callback();
			});
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.uppwd.newPassword) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};

			return {
				fit:'',
				// 保存查询到的用户信息
				users: {},
				// 展示用户信息的对话框
				UserDetaties: false,
				imgurl: 'http://localhost:8888/crowdfunding_system_war_exploded/showimg?filename=',
				// 修改的对话框
				updateDialogVisible: false,
				//修改的用户对象
				updUser: {
					userid: '',
					username: '',
					password: '',
					sex: '',
					age: '',
					email: '',
					tx: '',
					usertype: '',
					userisdel: '',
					token: ''
				},
				filelist: [],
				dialogImageUrl:false,
				// 修改图片预览的路径
				dialogImageUrlupdate: '',
				// 修改图片预览的对话框
				dialogVisibleupdate: false,
				imgDialogVisible: false,
				updateUsers: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],

					email: [{
						validator: checkEmail,
						trigger: 'blur'
					}]
				},
				// 保存填写在表单中的数据
				uppwd: {
					oldpassword: '',
					newPassword: '',
					checkPass: ''
				},
				// 保存后端传入的数据
				updatePassword: {

				},
				// 修改密码的对话框
				passwordDialog: false,
				// 修改密码的验证规则
				passwordRules: {
					oldpassword: [{
							required: true,
							message: '请输入原密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 6,
							message: '长度为6个字符',
							trigger: 'blur'
						}
					],
					newPassword: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 6,
							message: '长度为6个字符',
							trigger: 'blur'
						}
					],
					checkPass: [{
						validator: validatePass,
						trigger: 'blur'
					}],

				}
			}
		},
		methods: {
			loginout() {
				window.sessionStorage.clear()
				this.$router.push("/index")
			},
			toIndex() {
				this.$router.push("/index")
			},
			toMember() {
				this.$router.push("/member")
			},
			async toHome(userid){
				var res = await this.$http.get('selectById?id=' + userid)
				if (res.data.code == 400) {
					this.$message.error(res.data.message)
				} else {
					if(res.data.data.usertype==1){
						this.$router.push('/home')
					}else{
						this.$message.error("你没有该权限！！！")
					}
				}
			},
			// 关闭对话框
			shutUser() {
				this.UserDetaties = false
			},
			// 查询当前用户的基本信息
			async selectThisUser() {
				var id = window.sessionStorage.getItem("userid")
				var res = await this.$http.get('selectById?id=' + id)
				if (res.data.code == 400) {
					this.$message.error(res.data.message)
				} else {
					this.users = res.data.data
				}
			},
			// 修改对话框中的取消事件
			updatereset() {
				// 关闭对话框
				this.updateDialogVisible = false;
				this.$refs.updateref.resetFields();
				this.filelist = [];
			},
			// 修改用户确定
			upUser() {
				this.$refs.updateref.validate(async (bo) => {
					if (bo) {
						// this.updUser.userid=window.sessionStorage.getItem("userid");

						console.log(this.updUser)

						var param = new URLSearchParams;
						param.append("userid", this.updUser.userid);
						param.append("username", this.updUser.username);
						param.append("password", this.updUser.password);
						param.append("sex", this.updUser.sex);
						param.append("age", this.updUser.age);
						param.append("email", this.updUser.email);
						param.append("tx", this.updUser.tx);
						let res = await this.$http.post('updateUser', param);
						// let res = await this.$http.get('updateUser',qs.stringify(this.updUser));
						// 处理返回值信息，并给出不同的信息提示
						console.log(this.updUser)
						if (res.data.code == 400) { // 添加失败
							this.$message.error(res.data.message);
							
						} else {
							this.$message.success(res.data.message);
							this.updateDialogVisible = false
							this.selectThisUser()
						}
						// 打开详细信息的对话框
						this.selectThisUser()
						this.UserDetaties = true;
					} else {
						this.$message.error('格式不合法');
					}
				})
			},
			async toUpdateUser(id) {
				//从后端根据id查询当前用户信息
				var res = await this.$http.get("selectById?id=" + id);
				if (res.data.code == 200) {
					// 赋予对象
					this.updUser = res.data.data;
					// 把当前对象的图片路径放入到filelist中
					var tp = {
						url: 'http://localhost:8888/crowdfunding_system_war_exploded/showimg?fname=' + this.updUser
							.tx
					};
					this.filelist.push(tp);
					// 展示修改的对话框
					this.updateDialogVisible = true;
				} else {
					this.$message.error(res.data.message);
				}
			},
			// 图片移除
			handleRemove(file, fileList) {
				// console.log(file, fileList);
				this.updUser.tx = '';
			},
			// 图片放大
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.imgDialogVisible = true;
			},
			// 图片上传成功后的函数
			addSuccess(res) {
				console.log(res)
				this.updUser.tx = res.message;
			},
			// 判断原密码是否填写正确
			pwd() {
				if (this.uppwd.oldpassword != this.updatePassword.password) {
					this.$message.error("原密码输入错误，请重新填写")
					this.$refs.passwordRef.resetFields();

				} else {
					this.$message.success("原密码输入正确，请输入新密码")
				}

			},
			// 取消密码修改
			shutpwd() {
				this.passwordDialog = false
				this.$refs.passwordRef.resetFields();
			},
			// 修改密码确定
			updatepwd() {
				if (this.uppwd.oldpassword == this.updatePassword.password) {
					this.$refs.passwordRef.validate(async (bo) => {
						if (bo) {
							// var param = new URLSearchParams;
							// this.updatePassword.password=this.uppwd.newPassword
							var param = new URLSearchParams;
							param.append("userid", this.updatePassword.userid);
							param.append("username", this.updatePassword.username);
							param.append("password", this.uppwd.newPassword);
							param.append("sex", this.updatePassword.sex);
							param.append("age", this.updatePassword.age);
							param.append("email", this.updatePassword.email);
							param.append("tx", this.updatePassword.tx);
							let res = await this.$http.post('updateUser', param);
							// 处理返回值信息，并给出不同的信息提示

							if (res.data.code == 400) {
								this.$message.error(res.data.message);
							} else {
								this.$message.success(res.data.message);
								this.passwordDialog = false
								this.$refs.passwordRef.resetFields();

							}

						} else {
							this.$message.error('格式不合法');
						}
					})
				} else {
					this.$message.warning("请输入原密码，否则无法修改")
					this.$refs.passwordRef.resetFields();
				}
			},
			// 去修改密码
			async toupdatepwd(id) {
				this.passwordDialog = true
				var res = await this.$http.get("selectById?id=" + id);
				console.log(res.data)
				if (res.data.code == 200) {
					this.updatePassword = res.data.data

				} else {
					this.$message.error(this.data.message)
				}
			},
			// 关闭修改密码对话框
			passreset() {
				this.$refs.passwordRef.resetFields();
				this.passwordDialog = false
			},
			// 找回密码
			async returnPassword() {
				let id = window.sessionStorage.getItem("userid")
				let res = await this.$http.get('selectPassword?id=' + id)
				if (res.data.code == 200) {
					// console.log(res.data.data)
					// alert("你的原密码为"+res.data.data)
					this.$message.success("你的原密码为" + res.data.data)
				} else {
					this.$message.error(res.data.message)
				}
			}
		},
		mounted() {
			this.selectThisUser()
		}
	}
</script>

<style scoped>
	.el-avatar {
		margin-top: 7px;
		margin-right: 14px;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	#member_id {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 50px;
	}

	#containers {
		margin-bottom: 40px;
		height: 100%;
	}
</style>
